<template>
	<view class="quan">
		<!-- 费率 -->
		<form @submit="formSubmit" @reset="formReset">
		<view class="top">
			变现手续费为变现金额的{{yh_new.bili}}%
		</view>
		<!-- 添加银行卡 -->
		
		<view v-if="banknew=='' ">
		<view class="add_bank" @click="addbank">
			<view class="bank_left">请添加银行卡</view>
			<image  class="right_icon" src="/static/right.png" />
			</view>
		</view><view v-else>
		<!-- 收货地址 -->
		<view class="add_bank" @tap="addbank">
			<view class="dur">
				<view class="title">{{banknew.bankname}}</view>
				<view class="term">{{banknew.holder}}</view>
				<view class="kahao">{{banknew.cardnumber}}</view>
			</view>
			<view class="jiangli">
					<!-- <img :src="couponValidList.images" alt=""> -->
					<image class="images" src="/static/listbank.png"></image>
				</view>
		</view>
		</view>
		<!-- 结尾 -->
		<!-- 变现金额 -->
		<view class="cash_in">
				<view class="title">变现金额</view>
				<view class="input_num"><view class="input_left">￥</view><input class="num" name="jin" placeholder="请输入变现金额" @input="input_btn" /></view>
				<view class="balance">现金余额￥{{yh_new.money}}</view>
			</view>
		<!-- 验证码 -->
			<view class="cash_in_yzm"><view class="yzm_text">验证码</view><input class="yzm" type="text" name="yzm" placeholder="手机验证码" />
			<view v-if="show_yzm">
				<view class="yzm_btn" @tap="yzm">获取验证码</view>
			</view>
			<view v-else>
				<view class="yzm_btn2">剩余{{seconde}}s</view>
			</view>
			</view>
			<!-- 变现按钮 -->
			<view class="btn"><button type="primary" form-type="submit">确认变现</button></view>
			<!-- <view class="rule">变现金额必须大于100元，且为100整数倍</view> -->
			</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				look: true,
				show_yzm:true,
				banknew:'',
				num:'0.5',
				yh_new:'',
				jine:'',
				yhxx:'',
				seconde:'60',
				row:'',
			}
		},
		onLoad() {
			
			// 用户信息请求
			uni.request({
				url:'http://tuiguang.yiyunoto.com/api/member/tixianmoney',
				header:{authtoken:this.$store.state.token},
				success:(res)=>{
					console.log("11请求成功",res)
					this.yh_new=res.data.data
				},
				fail:(res)=>{
					console.log("请求失败",res)
				}
			})
			// 获取银行卡信息
			uni.request({
				url:'http://tuiguang.yiyunoto.com/api/member/mem_bank',
				header:{authtoken:this.$store.state.token},
				method:'POST',
				success:(res)=>{
					console.log("请求成功",res.data)
					if(res.data.data.length==0){
						this.banknew==""
					}else{
						console.log("请求成功",res.data.data[0])
						this.banknew=res.data.data[0]
					}
					
				},
				fail:(res)=>{
					console.log("请求失败",res)
				}
			})
			
			
		},
		onShow() {
			console.log("上页返回数据",this.banknew)
		},
		methods: {
			input_btn:function(e){
				console.log(e.detail.value)
				this.jine=e.detail.value
				console.log("上页返回数据",this.banknew)
			},
			
			addbank:function(){
				uni.navigateTo({
					url:"../list_bank/list_bank"
				})
			},
			yzm:function(){
				console.log("获取验证码",this.tel)
					uni.request({
							url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
							method:'POST',
							header:{authtoken:this.$store.state.token},
							data:{
								phone:this.yh_new.phone,
							},
								success: (res) => {
									this.$api.msg(res.data.msg);
									if(res.data.msg=="短信验证码发送成功"){
									this.show_yzm=false,
									setInterval(()=>{
										--this.seconde
									},1000)
									setTimeout(()=>{
										this.show_yzm=true,
										this.seconde=60},
										60000
									)}
							console.log("ya",res.data.msg)							// console.log(res.data.data);
							}
						});
				},
			formSubmit: function(e) {
				console.log(e.detail.value)
				this.yhxx = e.detail.value
				var content = this.yhxx
				var bankid =this.banknew
				if(content.yzm==""){
					this.$api.msg("请输入验证码");
				}else{
					console.log("1223",this.banknew)
				if(bankid=="" ){
					this.$api.msg("请添加银行卡");
				}else{
				uni.request({
					url: 'http://tuiguang.yiyunoto.com/api/member/tixianmoney',
					header:{authtoken:this.$store.state.token},
					method: 'POST',
					data: {
						money: content.jin,
						code: content.yzm,
					    bankid:bankid.id,
					},
					success: (res) => {
						console.log("提现成功", res)
						this.$api.msg(res.data.msg);
						console.log("提现成功", res.data.data)
						if (res.data.msg == "提现成功") {
							
							setTimeout(()=>{uni.navigateBack()},
								2000
							)}
						
						console.log(res.data.data);
					},
					fail: (res) => {
						console.log("登录失败", res)
						uni.showToast({
							title: res.data.msg
						})
					}
				});
				}
				}
			}
		}
	}
</script>

<style>
	.quan{
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
	}
	.top{
		width: 100%;
		height: 70upx;
		text-align: center;
		background:#FDEFD4 ;
		color: #5F321F;
		font-size: 28upx;
		padding-top: 20upx;
		box-sizing: border-box;
	}
	.add_bank{
		width: 100%;
		height:145upx ;
		background: #FFFFFF;
	}
	.dur {
		width: 70%;
		float: left;
		
		padding-left: 30upx;
	}
	
	.row {
		width: 690upx;
		height: 179upx;
		background: #F1F1F1;
		border-radius: 8upx;
		margin-left: 30upx;
		margin-top: 14upx;
	}
	.title {
		padding-left: 0upx;
		padding-top: 28upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(0, 0, 0, 1);
	}
	.term {
		padding-left: 25upx;
		padding-top: 7upx;
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(105, 105, 105, 1);
	}
	.kahao {
		padding-left: 25upx;
		padding-top: 10upx;
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFangSC;
		color: rgba(105, 105, 105, 1);
	}
	.images {
		padding-top: 20upx;
		width:100upx;
		height:100upx;
	}
	.bank_left{
		width: 80%;
		height: 100%;
		float: left;
		padding-top: 50upx;
		padding-left:30upx ;
		box-sizing: border-box;
	}
	.right_icon{
		width: 15upx;
		height: 28upx;
		float: right;
		padding:50upx 30upx 0upx 0upx;
	}
	.cash_in{
		width: 100%;
		margin-top:18upx;
		background: #FFFFFF;
	}
	.title{
		width: 100%;
		height:50upx;
		padding:23upx 30upx ;
		box-sizing: border-box;
	}
	.input_num{
		width: 90%;
		height:90upx;
		border-bottom: #E6E6E6 1upx solid;
		margin-left:30upx;
		margin-top: 20upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.input_left{
		width: 10%;
		height: 100%;
		padding-top:30upx;
		float: left;
		box-sizing: border-box;
	}
	.num{
		width:70%;
		height: 100%;
		padding-top:20upx;
		float: left;
	}
	.balance{
		width: 100%;
		padding-top:20upx;
		padding-left: 30upx;
		font-size: 26upx;
		color:#B7B7B7;
		padding-bottom: 50upx;
	}
.cash_in_yzm{
		width: 100%;
		height: 100upx;
		padding: 30upx 30upx;
		margin-top:18upx ;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.yzm_text{
		width:25%;
		float: left;
		
	}
	.yzm {
		width:50%;
		float: left;
	}

	.yzm_btn {
		width: 25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: blue;

	}
	.yzm_btn2{
		width:25%;
		font-size: 26upx;
		text-align: right;
		float: right;
		color: #DBDADA;
	}
	.btn {
		width: 90%;
		margin: 80upx auto 30upx;
	}
	.rule{
		width:100%;
		text-align: center;
		font-size:28upx ;
		color:#929292;
	}
</style>
